<script lang="ts" setup>
import { computed, defineEmits, defineProps, ref } from 'vue';

import { StorageManager } from '@vben-core/shared/cache';

import {
  ElButton,
  ElCol,
  ElDialog,
  ElIcon,
  ElMessage,
  ElOption,
  ElRow,
  ElSelect,
  ElTabPane,
  ElTabs,
  ElTag,
} from 'element-plus';

import { fileApi, userApi } from '#/api';

const props = defineProps({
  visible: Boolean,
  // eslint-disable-next-line vue/require-default-prop
  currentSelectedCard: Object,
});
const emit = defineEmits(['update:visible', 'shareSuccess']);

const storageManager = new StorageManager({
  prefix: '',
  storageType: 'sessionStorage',
});

const localVisible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val),
});

const toUsers = ref([]);
const toUserEmails = ref([] as any);

const handleClose = () => {
  emit('update:visible', false);
};

const shareFileToUsers = () => {
  fileApi
    .shareFile({
      fromUser: storageManager.getItem('email') as string,
      toUsers: toUsers.value,
      fileId: props.currentSelectedCard?.data?.id,
    })
    .then((res) => {
      ElMessage.success(res.message);
      emit('shareSuccess');
      handleClose();
    });
};

const remoteMethod = (query: string) => {
  if (query) {
    userApi.getUsersByEmailLink(query).then((res: any) => {
      if (res) {
        toUserEmails.value = res.data;
      }
    });
  } else {
    toUserEmails.value = [];
  }
};
</script>

<template>
  <ElDialog
    v-if="visible"
    v-model="localVisible"
    title="分享文件"
    width="30%"
    align-center
    @close="handleClose"
  >
    <template #header="{ titleId }">
      <h4 :id="titleId">
        {{ $t('page.resources.shareFile') }}:
        {{ props.currentSelectedCard?.data?.name || '未选择文件' }}
      </h4>
    </template>

    <ElTabs type="border-card" class="demo-tabs">
      <ElTabPane>
        <template #label>
          <span class="custom-tabs-label">
            <ElIcon><ElLink /></ElIcon>
            <span>{{ $t('page.resources.shareLink') }}</span>
          </span>
        </template>
        Route
      </ElTabPane>

      <ElTabPane>
        <template #label>
          <span class="custom-tabs-label">
            <ElIcon><Promotion /></ElIcon>
            <span>{{ $t('page.resources.platformShare') }}</span>
          </span>
        </template>

        <ElRow>
          <ElCol :span="6">{{ $t('page.resources.resourceFile') }}：</ElCol>
          <ElCol :span="18">
            <ElTag size="default" class="ml-2" type="info">
              {{ props.currentSelectedCard?.data?.name || '未选择文件' }}
            </ElTag>
          </ElCol>
        </ElRow>

        <br />

        <ElRow>
          <ElCol style="display: flex; align-items: center" :span="6">
            {{ $t('page.resources.shareWith') }}：
          </ElCol>
          <ElCol :span="18">
            <ElSelect
              v-model="toUsers"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入用户邮箱"
              remote-show-suffix
              :remote-method="remoteMethod"
              size="default"
            >
              <ElOption
                v-for="item in toUserEmails"
                :key="item.id"
                :label="item.email"
                :value="item.email"
              />
            </ElSelect>
          </ElCol>
        </ElRow>
      </ElTabPane>
    </ElTabs>

    <template #footer>
      <span class="dialog-footer">
        <ElButton type="primary" @click="shareFileToUsers">
          {{ $t('page.resources.share') }}
        </ElButton>
        <ElButton @click="handleClose">
          {{ $t('page.resources.cancel') }}
        </ElButton>
      </span>
    </template>
  </ElDialog>
</template>
